<template>
	<view>
		<!-- 用户信息展示 -->
		<view class="user-info" v-if="isUserLoggedIn">
			<view class="avatar">
				<image :src="user.img" class="avatar-img"></image>
			</view>
			<view class="user-details">
				<view class="username">{{ user.name }}</view>
				<view class="user-phone">{{ user.phone }}</view>
			</view>
		</view>

		<!-- 未登录提示 -->
		<view class="login-prompt" v-else>
			请登录后查看个人信息
		</view>
		<view style="margin-left: 10rpx; margin-top: 150rpx;">很高兴为您服务(^v^)</view>
		<view style="color: #a7a7a7; display: flex;justify-content: center;font-size: 28rpx; ">您遇到的问题，我们会第一时间帮你解决！
		</view>
		<view class="login" v-show="buck">
			<view class="a"><u-line color="#DCDCDC"></u-line></view>
			<view class="b">
				<view @click="callPhone('15775427877')" class="l2">
					<image src="../static/img/phone.png" style="width: 50rpx; height: 50rpx;"></image>服务热线
				</view>
				<text style="color: #DCDCDC; display: flex; align-items: center;">|</text>
				<view class="l1">
					<button open-type="contact" bindcontact="handleContact">
						<image src="../static/img/customer.png" style="width: 50rpx; height: 50rpx;"></image><text
							style="font-size: 30rpx;">联系客服</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../static/service/requestAddress/rtas.js"
	import {
		socketurl
	} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				user: null, // 用户信息
				sex: "",
				username: "",
				phone: "",
				img: "",
				buck: true,
			};
		},
		computed: {
			isUserLoggedIn() {
				// 使用用户信息中的某个字段来判断用户是否已登录
				return !!uni.getStorageSync("user");
			},
		},
		created() {
		    if (this.isUserLoggedIn) {
		      // 获取用户信息
		      this.user = JSON.parse(uni.getStorageSync("user"));
		    }
		  },
		onShow() {
			if (!uni.getStorageSync("user")) {
				uni.$u.toast("登录后才能联系客服")
				this.buck = false
			}
		},
		methods: {
			// 拨打电话
			  callPhone(tel) {  
			        uni.makePhoneCall({  
			            phoneNumber: tel  
			         });  
		    },
		}
	}
</script>

<style lang="scss">
	.user-info {
	  position: fixed;
	  top: 0;
	  display: flex;
	  align-items: center;
	  padding: 20rpx;
	  border-bottom: 1rpx solid #DCDCDC;
	  background-color: #fff;
	  width: 100%;
	  z-index: 9999;
	  /* 确保用户信息在最上层 */
	}
	.avatar {
	  width: 100rpx;
	  height: 100rpx;
	  margin-right: 20rpx;
	}
	
	.avatar-img {
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	}
	.user-details {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	}
	
	.username {
	  font-size: 28rpx;
	  color: #333;
	}
	
	.user-phone {
	  font-size: 24rpx;
	  color: #999;
	}
	/* 未登录提示样式 */
	.login-prompt {
	  padding: 20rpx;
	  font-size: 28rpx;
	  color: #999;
	  text-align: center;
	  margin-top: 20rpx;
	}
	button::after {
		border: none;
	}

	button {
		width: 100%;
		background-color: #fff;
		border-radius: 0;
		display: flex;
		justify-content: center;
		/*水平*/
		align-items: center;
		/*垂直*/
	}

	.a {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		bottom: 105rpx;
	}

	.b {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		bottom: 10rpx;

		.l1 {
			width: 50%;
			font-size: 20rpx;
			gap: 10rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 10rpx;
		}

		.l2 {
			width: 50%;
			font-size: 30rpx;
			gap: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			/*水平*/
			align-items: center;
			/*垂直*/
			margin-bottom: 10rpx;
		}
		
		.l2:active {  
		    background-color: #DEDEDE; /* 或者其他你想要的样式 */  
		    transition: all 0.2s ease; /* 平滑的过渡效果 */  
		}
	}
</style>